<style>
  .questionNew .ivu-input{
    height: 36px;
  }
  .questionNew .ivu-select-single .ivu-select-selection,.questionNew .ivu-select-single .ivu-select-selection .ivu-select-placeholder, .ivu-select-single .ivu-select-selection .ivu-select-selected-value{
    height: 36px;
    line-height: 36px;
  }
</style>
<template>
  <Row type="flex" justify="center" align="top" class="code-row-bg">
    <Col span="1" style="background:#3F88D5;height:100vh;">
      <NavLeft :selected="3" :avatar="avatar"></NavLeft>
    </Col>
    <Col span="4">
      <NavMiddle :itemList="itemList"></NavMiddle>
    </Col>
    <Col span="19" style="background:#f5f7f9;height:100vh;">
      <Layout>
        <Content :style="{padding: '0 16px 16px'}">
          <div class="questionNew">
            <!-- 顶部标题 -->
            <div class="qd_title">
              <div class="qdt_left" @click="goback">
                <Icon type="ios-arrow-back"/>
                返回
              </div>
              <div class="qdt_center" v-html="$route.query.problemId == undefined?'添加事件':'修改事件'"></div>
              <div class="qdt_right">
                <a href="#" type="text" size="large" class="btn_tools">
                  <Icon type="ios-cog" size="20"></Icon>
                </a>
                <a type="text" size="large" class="btn_tools">
                  <Icon type="ios-share-alt" size="20"></Icon>
                </a>
              </div>
            </div>
            <div class="question">
              <div class="queCon">
                <span class="title">标题</span>
                <Input v-model="title" placeholder="请输入标题" />
              </div>
              <div class="queCon queCons">
                <div class="qc">
                  <span class="title">选择产品</span>
                  <Select v-model="product">
                    <Option v-for="item in productList" :value="item.product_name_id" :key="item.parameter_id">{{ item.name }}</Option>
                  </Select>
                </div>
                <div class="qc">
                  <span class="title">选择指标</span>
                  <Select v-model="target">
                    <Option v-for="item in targetList" :value="item.product_zhibiao_id" :key="item.product_zhibiao_id">{{ item.name }}</Option>
                  </Select>
                </div>
                <div class="qc">
                  <span class="title">选择问题来源</span>
                  <Select v-model="source">
                    <Option v-for="item in sourceList" :value="item.problem_source_id" :key="item.problem_source_id">{{ item.name }}</Option>
                  </Select>
                </div>
              </div>
              <div class="queCon">
                <span class="title">选择问题分类</span>
                <Cascader v-model="problem" :data="problemList" trigger="hover"></Cascader>
              </div>
            </div>
          </div>
          <footer>
            <Button type="primary" @click="submitQue">确认</Button>
            <Button @click="goback">取消</Button>
          </footer>
        </Content>
      </Layout>
    </Col>
  </Row>
</template>

<script>
  import cookie from 'js-cookie';
  import NavLeft from '@/components/NavLeft';
  import NavMiddle from '@/components/NavMiddle';
  export default {
    name: "questionNew",
    data() {
      return{
        itemList: [],
        avatar: "",
        title: '',
        product: '',
        productList: [],
        target: '',
        targetList: [],
        source: '',
        sourceList: [],
        problem: [],
        problemList: [],
      }
    },
    components: {NavLeft: NavLeft, NavMiddle: NavMiddle},
    created(){
      window.document.title = 'SCS';
      this.getData();
      this.getInfo();
    },
    methods: {
      goback(){
        this.$router.go(-1)
      },
      getData() {
        var uid = cookie.get('uid');
        var token = cookie.get('token');
        if (!uid || !token) {
          //this.$Message.warning('请登录');
          //store.dispatch('setLoginStatus', 0)
          //window.location.reload()
        }
        this.$Loading.start();
        var str = {type: 'login', loginType: cookie.get('loginType')};
        var strdata = this.$twjsdes.enstr(str);
        this.$http.post(this.$API_URL + '/item/home', {alldata: strdata.alldata}).then((response) => {
          this.$Loading.finish();
          var res = this.$twjsdes.decrypt(response.data.alldata);
          if (res.status == -1 && res.data.backurl) {
            this.$Modal.warning({
              title: '提示',
              content: '请在企业微信授权登录后使用',
              onOk: () => {
                if (this.$twjsdes.isWechat() === true) {
                  window.location.href = res.data.backurl_oauth2
                } else {
                  window.location.href = res.data.backurl
                }
              }
            });

          } else if (res.status != 1) {
            this.$Message.error(res.msg);
          } else {
            this.itemList = res.data.list;
            this.avatar = res.data.avatar;
          }
        }).catch(function (error) {
          this.$Modal.error({
            title: '提示',
            content: '网络连接错误，请检查后重试'
          });
          //console.log(error);
        });
      },
      getInfo() {
        let self = this
        let pid = self.$route.query.problemId
        let str = {}
        if (pid != undefined) {
          str = {
            problem_id: pid,
            uid: cookie.get('uid')
          };
        }else {
          str = {
            uid: cookie.get('uid')
          };
        }
        this.$Loading.start();
        var strdata = this.$twjsdes.enstr(str);
        this.$http.post(this.$API_URL + '/item/problemchoice', {alldata: strdata.alldata}).then((response) => {
          var res = this.$twjsdes.decrypt(response.data.alldata);
          self.title = res.data.title
          self.product = res.data.product_name_id
          self.target = res.data.product_zhibiao_id
          self.source = res.data.problem_source_id
          self.productList = res.data.product_list
          self.targetList = res.data.zhibiao_list
          self.sourceList = res.data.source_list
          let proList = []
          if (res.data.problem_category_id != '') {
            proList = res.data.problem_category_id.split(',')
          }
          self.problem = proList
          let list = []
          for (let i = 0; i < res.data.problem_list.length; i++){
            list[i] = {
              value: res.data.problem_list[i].problem_category_id,
              label: res.data.problem_list[i].name,
              children: []
            }
            for (let x = 0; x < res.data.problem_list[i].item.length; x++) {
              list[i].children[x] = {
                value: res.data.problem_list[i].item[x].problem_category_id,
                label: res.data.problem_list[i].item[x].name,
                children: []
              }
              for (let y = 0; y < res.data.problem_list[i].item[x].item.length; y++) {
                list[i].children[x].children[y] = {
                  value: res.data.problem_list[i].item[x].item[y].problem_category_id,
                  label: res.data.problem_list[i].item[x].item[y].name,
                  children: []
                }
              }
            }
          }
          self.problemList = list
          this.$Loading.finish();
        }).catch(function (error) {
          this.$Modal.error({
            title: '提示',
            content: '网络连接错误，请检查后重试'
          });
          //console.log(error);
        });
      },
      submitQue() {
        let self = this
        let pid = self.$route.query.problemId
        let str = {}
        if (pid != undefined) {
          str = {
            problem_id: pid,
            title: self.title,
            product_name_id: self.product,
            product_zhibiao_id: self.target,
            problem_source_id: self.source,
            problem_category_id: self.problem,
            uid: cookie.get('uid')
          };
        }else {
          str = {
            title: self.title,
            product_name_id: self.product,
            product_zhibiao_id: self.target,
            problem_source_id: self.source,
            problem_category_id: self.problem,
            unit_id: self.$route.query.id,
            uid: cookie.get('uid')
          };
        }
        this.$Loading.start();
        var strdata = this.$twjsdes.enstr(str);
        this.$http.post(this.$API_URL + '/item/problemadd', {alldata: strdata.alldata}).then((response) => {
          var res = this.$twjsdes.decrypt(response.data.alldata);
          self.$router.push({
            path: '/item/question/questionDetail',
            query: {id: res.data.unit_id, problemId: res.data.problem_id, noede: 0}
          })
          this.$Loading.finish();
        }).catch(function (error) {
          this.$Modal.error({
            title: '提示',
            content: '网络连接错误，请检查后重试'
          });
          //console.log(error);
        });
      },
    }
  }
</script>

<style lang="less" scoped>
  .questionNew{
    display: flex;
    flex-direction: column;
    padding: 0 16px;
    box-sizing: border-box;
    .qd_title {
      width: 100%;
      height: 68px;
      line-height: 68px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      .qdt_left {
        font-size: 16px;
        color: rgb(70, 76, 91);
        cursor: pointer;
      }
      .qdt_center {
        font-size: 16px;
        font-weight: bold;
        color: rgb(70, 76, 91);
        text-align: center;
      }
      .qdt_right {
        height: 28px;
        margin-top: auto;
        margin-bottom: auto;
        display: flex;
        flex-direction: row;
        .btn_tools {
          padding: 6px 10px 6px 10px;
          background: #eee;
          border-radius: 20px;
          color: #666666;
          display: flex;
          flex-direction: column;
          justify-content: center;
          transition: color .2s ease-in-out;
        }
        .btn_tools:first-child {
          margin-right: 10px;
        }
        .btn_tools:hover {
          color: #57a3f3;
        }
      }
    }
    .question{
      background: #fff;
      padding: 0 16px;
      box-sizing: border-box;
      border-radius: 5px;
      border: 1px solid #e1e1e1;
      .queCon{
        padding: 16px 0;
        border-bottom: 1px dashed #e1e1e1;
        display: flex;
        flex-direction: column;
        .title{
          font-size: 13px;
          color: #666666;
          line-height: 13px;
          margin-bottom: 10px;
        }
      }
      .queCons{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        .qc{
          width: 33%;
          display: flex;
          flex-direction: column;
        }
      }
      .queCon:last-child{
        border-bottom: none;
      }
    }
  }
  footer{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background: #f9f9f9;
    border-top: 1px solid #e1e1e1;
    display: flex;
    flex-direction: row;
    padding: 0 40px;
    box-sizing: border-box;
    button{
      width: 73px;
      height: 30px;
      margin-top: auto;
      margin-bottom: auto;
      padding-top: 0;
      padding-bottom: 0;
      line-height: 1;
      margin-right: 10px;
    }
  }
</style>